
import Reflux from 'reflux';
import ReactMixin from 'react-mixin';
import * as React from "react";

import Actions from './Actions';
import Store from './Store';
import {Icon, InputItem, List, NavBar, NoticeBar, Picker, Result, WhiteSpace} from "antd-mobile";

class Auth extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    Actions.customInit(this.props.params.doorId);
  }

  onICChange(val) {
    Actions.onICChange(val);
  }

  onPhoneChange(val) {
    Actions.onPhoneChange(val);
  }

  onNameChange(val) {
    Actions.onNameChange(val);
  }

  onGenderChange(val) {
    Actions.onGenderChange(val);
  }

  onNavBarClick(key) {
    Actions.onNavBarClick(key);
  }

  onNoticeBarClick() {
    Actions.onNoticeBarClick();
  }

  render() {

    let navBarRightContent = null;
    let navBarLeftContent = null;

    switch (this.state.auth.stepStatus) {
      case 0:
        navBarRightContent = <div onClick={() => this.onNavBarClick('next')}>下一步</div>;
        navBarLeftContent = null;
        break;
      case 1:
        navBarRightContent = <div onClick={() => this.onNavBarClick('next')}>下一步</div>;
        navBarLeftContent = <div onClick={() => this.onNavBarClick('pre')}>上一步</div>;
        break;
      case 2:
        navBarRightContent = <div onClick={() => this.onNavBarClick('auth')}>授权</div>;
        navBarLeftContent = <div onClick={() => this.onNavBarClick('pre')}>上一步</div>;
        break;
      case 3:
        navBarRightContent = <div onClick={() => this.onNavBarClick('close')}>关闭</div>;
        navBarLeftContent = null;
        break;
      default:
        navBarRightContent = null;
        navBarLeftContent = null;
        break;
    }

    let content;
    switch (this.state.auth.stepStatus) {
      case 0:
        content =
          <List>
            <InputItem
              onChange={(val) => this.onICChange(val)}
              maxLength="18"
              value={this.state.auth.IC}
              editable={true}
              clear={true}
              placeholder="请输入被授权人的身份证号码">身份证号</InputItem>
          </List>;
        break;
      case 1:
        content =
          <div>
            <List>
              <InputItem
                onChange={(val) => this.onICChange(val)}
                maxLength="18"
                value={this.state.auth.IC}
                editable={false}
                clear={true}
                placeholder="请输入被授权人的身份证号码">身份证号</InputItem>
            </List>
            <List renderHeader={this.state.auth.icExist ? <div style={{color: 'red'}}>您输入的身份证号已在系统中，请确认下列信息后，选择下一步授权。如要修改身份证号，请选择上一步。</div> : <div style={{color: 'red'}}>您输入的身份证号不在系统中，请完善下列信息后选择下一步。</div>}>
              <InputItem
                onChange={(val) => this.onNameChange(val)}
                maxLength="40"
                value={this.state.auth.name}
                editable={!this.state.auth.icExist}
                clear={true}
                placeholder="请输入被授权人的姓名">姓名</InputItem>
              <InputItem
                type="number"
                maxLength="11"
                onChange={(val) => this.onPhoneChange(val)}
                value={this.state.auth.phone}
                editable={!this.state.auth.icExist}
                clear={true}
                placeholder="请输入被授权人的手机号码">手机号码</InputItem>
              <Picker
                value={[this.state.auth.gender]}
                disabled={this.state.auth.icExist}
                onChange={(val) => this.onGenderChange(val)}
                data={[
                  {
                    label: '男',
                    value: 1
                  },
                  {
                    label: '女',
                    value: 2
                  }
                ]}
                cols={1}>
                <List.Item arrow="horizontal">性别</List.Item>
              </Picker>
            </List>
          </div>;
        break;
      case 2:
        content =
          <div>
            <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
              请确认下列信息，确认无误后，选择授权。
            </NoticeBar>
            <List renderHeader={<div>被授权的房屋信息</div>}>
              <InputItem value={this.state.auth.door.courtName} editable={false}>小区名称</InputItem>
              <InputItem value={this.state.auth.door.doorNo} editable={false}>门牌号</InputItem>
            </List>
            <List renderHeader={<div>被授权的人信息</div>}>
              <InputItem value={this.state.auth.name} editable={false}>姓名</InputItem>
              <InputItem value={this.state.auth.IC} editable={false}>身份证</InputItem>
              <InputItem value={this.state.auth.phone} editable={false}>手机</InputItem>
              <InputItem value={this.state.auth.gender === 1 ? '男' : '女'} editable={false}>性别</InputItem>
            </List>
          </div>;
        break;
      case 3:
        content =
          <div>
            <Result
              img={<Icon type="check-circle" style={{ fill: '#1F90E6', width: '60px', height: '60px' }} />}
              title="授权成功"
              message={'您已成功将投票权授权给'+this.state.auth.name}
            />
          </div>;
        break;
      default:
        break;
    }

    return (
      <div>
        {
          this.state.auth.NoticeBar.visible ?
            <div>
              <NoticeBar onClick={() => this.onNoticeBarClick()} mode="closable" icon={<Icon type="check-circle-o" size="xxs" />}>{this.state.auth.NoticeBar.text}</NoticeBar>
              <WhiteSpace/>
            </div>
            :
            null
        }
        <NavBar
          mode="dark"
          rightContent={navBarRightContent}
          leftContent={navBarLeftContent}
        >{this.state.auth.navBarText}</NavBar>
        {content}
      </div>
    );
  }
}

ReactMixin.onClass(Auth, Reflux.connect(Store, 'auth'));

export default Auth;
